iT邦幫忙

2021 iThome 鐵人賽

DAY 29
1
自我挑戰組

新手全端工程師的職場成長歷程系列 第 29

Day29:【技術篇】初探打包工具的存在?

  • 分享至 

  • xImage
  •  

一、前言

  先前有寫過兩篇關於 Webpack 的文章(文章1文章2),回顧起自己學習到 Webpack 是在培訓營課程尾聲時期,那時候還懞懞懂懂的,只知道很基本的用法,但不清楚實際深入運作原理,所以寫了前述兩篇。

  但大家有想過為何會有像是 Webpack 之類的打包工具誕生嗎?他的存在有什麼必要性呢?

二、打包工具的緣起

1. 前端工程化

  自從 Node.js 發行後,套件管理工具 npm 誕生,即是工程化的起點。npm 提供了 script 的功能,可以將 shell script 封裝起來供其他開發者使用。

{
    "script":{
        "dev": "node app.js",
        "mock": "node index.js"
    }
}

  以上面這段程式碼來解說,當開發者輸入npm run dev,就會執行node app.js這行指令;相對地當開發者輸入npm run mock,就會執行node index.js這行指令。這樣簡短的 script 設定,可以解決一些基本需求。

  但後續開發過程,大部分重複繁雜的步驟,就需要工具為我們帶來工程化的方式,加速開發的流程。

2. 打包工具的選擇

  除了較常聽見的 Webpack,其實還有以下幾種打包工具可供選擇:

項次 名稱 備註
1 Grunt 比 Webpack 早發行,針對每個插件需分別設定。
2 Backpack 專注在 Node.js 後端專案
3 Parcel 好上手、無須設定便能直接使用。

三、打包工具的用途

1. 轉譯

  在使用前端框架編寫程式時,因為一般的瀏覽器只能聽解讀基礎的 HTML、CSS、JavaScript,中間必須經過轉換的步驟,就稱為轉譯。

  開發者撰寫出的程式碼,會透過打包工具力呼叫 Bable 套件,逐步將之轉譯成瀏覽器能解讀的內容,

2. 優化程式

  開發者可隨著程式碼開發需求,設定相對應的 Webpack 插件(如:minify、uglify、chunk等),就能套用各個插件帶來的優化功能至應用程式上。

3. 加速開發

  打包工具的套件真的很多樣且實用,以下簡列幾種舉例:

項次 套件名稱 用途
1 Webpack Spritesmith 可完成圖檔合併
2 Webpack 內建的 Hot Reload 可偵測並僅更新新修改到的內容

四、結論與自我鼓勵

  今日文章其實只是稍微提到打包工具之緣起與主要用途,文章內容是自己於下班時間研究書籍與網路資源整理出來,若有錯誤或不詳盡之處,再請各位前輩指導。

  如果想知道的更深入,推薦可以看「從0到Webpack」的「寫在 Webpack 之前」這個章節,其他前端更深入常聽到的專有名詞也可以看「前端三十」這本,相信會獲益不少!


本文同步發佈於我的個人網站 Annie Code Life


上一篇
Day28:【技術篇】ASP DOT NET CORE 的 MVC 基礎入門
下一篇
Day30:【技術篇】架設網站的基本知識
系列文
新手全端工程師的職場成長歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2021-10-12 23:15:40

一下子就29天了!!! 就差最後一哩路

我要留言

立即登入留言